<template>
  <div class="inputItemWrap">
    <template v-if="inputType === 'inputTypePhoneNumber' || inputType === 'inputTypeRecommend'">
      <div class="inputItem borderB" :class="{onFocus:onFocusBlur}">
        <span class="inputTitle">{{inputTitleTxt}}</span>
        <input
          type="number"
          class="uInput"
          :placeholder="inputPlaceholderTxt"
          @focus="inputFocus"
          @blur="inputBlur"
          v-model="inputValueTxt"
        >
        <i
          class="inputBtnClear uIcon uIconDelete"
          v-show="(inputValueTxt.length && onFocusBlur) > 0 ? true : false"
          @click="inputBtnClear"
        ></i>
      </div>
    </template>
    <template v-else-if="inputType === 'inputTypeNumberDecimals'">
      <div class="inputItem borderB" :class="{onFocus:onFocusBlur}">
        <span class="inputTitle">{{inputTitleTxt}}</span>
        <input
          type="number"
          class="uInput"
          :placeholder="inputPlaceholderTxt"
          @focus="inputFocus"
          @blur="inputBlur"
          v-model="inputValueTxt"
        >
        <i
          class="inputBtnClear uIcon uIconDelete"
          v-show="(inputValueTxt.length && onFocusBlur) > 0 ? true : false"
          @click="inputBtnClear"
        ></i>
        <span class="inputValueUnit">{{inputUnitTxt}}</span>
      </div>
    </template>
    <template v-else-if="inputType === 'inputTypeImgCode'">
      <div class="inputItem borderB" :class="{onFocus:onFocusBlur}">
        <span class="inputTitle">{{inputTitleTxt}}</span>
        <input
          type="text"
          class="uInput"
          :placeholder="inputPlaceholderTxt"
          @focus="inputFocus"
          @blur="inputBlur"
          v-model="inputValueTxt"
        >
        <i
          class="inputBtnClear uIcon uIconDelete"
          v-show="(inputValueTxt.length && onFocusBlur) > 0 ? true : false"
          @click="inputBtnClear"
        ></i>
        <img class="inputBtnCodeImg" src="">
      </div>
    </template>
    <template v-else-if="inputType === 'inputTypeMsgCode'">
      <div class="inputItem borderB" :class="{onFocus:onFocusBlur}">
        <span class="inputTitle">{{inputTitleTxt}}</span>
        <input
          type="number"
          class="uInput"
          :placeholder="inputPlaceholderTxt"
          @focus="inputFocus"
          @blur="inputBlur"
          v-model="inputValueTxt"
        >
        <i
          class="inputBtnClear uIcon uIconDelete"
          v-show="(inputValueTxt.length && onFocusBlur) > 0 ? true : false"
          @click="inputBtnClear"
        ></i>
        <btn-msg-code
          :inputCodeMsgCount="inputCodeMsgCount"
          :inputCodeMsgAuto="inputCodeMsgAuto"
          @inputBtnCodeMsgHandle="inputBtnCodeMsgHandle"
        ></btn-msg-code>
      </div>
    </template>
    <template v-else-if="inputType === 'inputTypePassword'">
      <div class="inputItem borderB" :class="{onFocus:onFocusBlur}">
        <span class="inputTitle">{{inputTitleTxt}}</span>
        <input
          :type="uIconActiveSwitch?'text':'password'"
          class="uInput"
          :placeholder="inputPlaceholderTxt"
          @focus="inputFocus"
          @blur="inputBlur"
          v-model="inputValueTxt"
        >
        <i
          class="inputBtnClear uIcon uIconDelete"
          v-show="(inputValueTxt.length && onFocusBlur) > 0 ? true : false"
          @click="inputBtnClear"
        ></i>
        <i class="uIcon uIconPasswordSwitch" :class="{uIconActive:uIconActiveSwitch}"
           @click="inputBtnPasswordSwitch"></i>
      </div>
    </template>
    <div class="inputErrorWrap" v-if="inputErrorSwitch">
      <i class="uIconToolTips uIconTooltipsError"></i>
      {{inputErrorTxt}}
    </div>
    <!--<span class="inputBtnValueAll">全体</span>-->
  </div>
</template>

<script>
  import btnMsgCode from '@/pagesmodule/btnMsgCode'

  export default {
    name: 'inputItemWrap',
    components: {
      btnMsgCode
    },
    data () {
      return {
        onFocusBlur: false,
        inputValueTxt: '',
        showInputBtnClear: false,
        uIconActiveSwitch: false,
        inputErrorSwitch: false,
        inputErrorTxt: ''
      }
    },
    props: {
      inputCodeMsgAuto: {
        type: Boolean
      },
      inputCodeMsgCount: {
        type: Number
      },
      inputType: {
        type: String,
        default: 'inputTypeCommon'
      },
      inputTitleTxt: {
        type: String,
        default: ''
      },
      inputUnitTxt: {
        type: String,
        default: '元'
      },
      inputPlaceholderTxt: {
        type: String,
        default: ''
      }
    },
    methods: {
      inputBtnCodeMsgHandle () {
        console.log('点击发送短信验证码')
      },
      inputFocus () {
        this.onFocusBlur = true
      },
      inputBlur () {
        this.onFocusBlur = false
      },
      inputBtnClear () {
        this.inputValueTxt = ''
      },
      inputBtnPasswordSwitch () {
        this.uIconActiveSwitch = !this.uIconActiveSwitch
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

<style lang="scss" module>

</style>
